import styled from "@emotion/styled"
import { SvgComponent } from "@/components/base/Svg"

const CommunityContainer = styled.div`
    width: 351rem;
    height: 108rem;
    border-radius: 10rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    margin: 8rem auto 0;
`

const CommunityTitle = styled.div`
    width: 327rem;
    height: 24rem;
    line-height: 24rem;
    font-family: "SF Pro Text";
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 0%;
    text-align: center;
    margin: 12rem;
`
const CommunityImages = styled.div`
    width: 327rem;
    height: 48rem;
    display: flex;
    justify-content: center;
    gap: 24rem;
`

const FacebookItem = styled(SvgComponent("pages/UserCenterPage/icon_facebook.svg"))`
    width: 40rem;
    height: 40rem;
`
const InstagramItem = styled(SvgComponent("pages/UserCenterPage/icon_instagram.svg"))`
    width: 40rem;
    height: 40rem;
`
const TelegramItem = styled(SvgComponent("pages/UserCenterPage/icon_telegram.svg"))`
    width: 40rem;
    height: 40rem;
`
const XItem = styled(SvgComponent("pages/UserCenterPage/icon_X.svg"))`
    width: 40rem;
    height: 40rem;
`

export default function RootLayout() {
    return (
        <CommunityContainer>
            <CommunityTitle>Join Filbet Community</CommunityTitle>
            <CommunityImages>
                <FacebookItem />
                <InstagramItem />
                <TelegramItem />
                <XItem />
            </CommunityImages>
        </CommunityContainer>
    )
}
